<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="show"
      :before-close="close"
      width="40%"
    >
      <div class="formBox">
        <div class="formHead">{{ formTitle }}</div>
        <div class="formWhite">
          <div class="left"><span class="red">*</span>级别</div>
          <div class="right">
            <el-select
              v-model="submitForm.level"
              placeholder="请选择级别"
              size="small"
            >
              <el-option label="国家级" value="国家级"></el-option>
              <el-option label="省市级" value="省市级"></el-option>
              <el-option label="区级" value="区级"></el-option>
              <el-option label="协会级" value="协会级"></el-option>
            </el-select>
          </div>
        </div>
        <div class="formGray">
          <div class="left"><span class="red">*</span>奖项名称</div>
          <div class="right">
            <el-input
              v-model="submitForm.awardName"
              placeholder="请输入奖项名称"
              size="small"
            ></el-input>
          </div>
        </div>
        <div class="formWhite">
          <div class="left">附件</div>
          <div class="right">
            <FileUpload
              v-model="submitForm.attachment"
              :limit="5"
              :fileType="['pdf']"
              :isShowTip="true"
              :fileSize="10"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="enSure" size="small">确定</el-button>
        <el-button type="primary" plain @click="close" size="small"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    detailForm: {
      default: () => ({}),
    },
    dialogType: {
      type: String,
      default: "honor", // honor: 企业荣誉, commendation: 政府表彰
    },
  },
  data() {
    return {
      submitForm: {
        level: "",
        awardName: "",
        attachment: "",
      },
    };
  },
  computed: {
    dialogTitle() {
      const isEdit = this.detailForm && Object.keys(this.detailForm).length > 0;
      const action = isEdit ? "编辑" : "新增";
      return this.dialogType === "honor"
        ? `${action}企业荣誉`
        : `${action}政府表彰`;
    },
    formTitle() {
      return this.dialogType === "honor" ? "企业荣誉" : "政府表彰";
    },
  },
  created() {
    if (this.detailForm && Object.keys(this.detailForm).length > 0) {
      // 处理字段名的兼容性
      if (
        this.dialogType === "commendation" &&
        this.detailForm.commendationName
      ) {
        // 政府表彰使用 commendationName，需要映射到 awardName
        this.submitForm = {
          ...this.detailForm,
          awardName: this.detailForm.commendationName,
        };
      } else {
        this.submitForm = { ...this.detailForm };
      }
    }
  },
  methods: {
    close() {
      this.$emit("closeMsg");
    },
    enSure() {
      if (!this.submitForm.level) {
        this.$modal.msgWarning("级别不能为空！");
      } else if (!this.submitForm.awardName) {
        this.$modal.msgWarning("奖项名称不能为空！");
      } else {
        // 处理返回数据的字段名
        let resultData = { ...this.submitForm };
        if (this.dialogType === "commendation") {
          // 政府表彰需要将 awardName 映射回 commendationName
          resultData.commendationName = this.submitForm.awardName;
          delete resultData.awardName;
        }
        console.log(resultData, "提交的表单数据");
        this.$modal.msgSuccess("保存成功！");
        this.$emit("closeMsg", resultData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.formBox {
  .left {
    flex-shrink: 0;
    min-height: 44px;
    line-height: 44px;
    width: 140px;
    padding-right: 15px;
    border-left: 1px solid #e4e4dc;
    border-right: 1px solid #e4e4dc;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #303133;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .right {
    flex: 1;
    min-height: 44px;
    border-right: 1px solid #e4e4dc;
    padding: 6px 15px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    // Element UI 组件样式 - 确保输入框在容器内
    ::v-deep .el-select {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      flex: 1 1 0;
    }
    ::v-deep .el-input {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      flex: 1 1 0;
    }
    ::v-deep .el-input__inner {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    ::v-deep .el-select .el-input {
      width: 100% !important;
      max-width: 100% !important;
    }
    // 对于 FileUpload 组件，需要从顶部对齐并占据全部宽度
    > .upload-file {
      width: 100%;
      max-width: 100%;
      align-self: flex-start;
      margin-top: 0;
      box-sizing: border-box;
    }
  }
  .formHead {
    width: 100%;
    height: 44px;
    background-color: #73879c;
    line-height: 44px;
    text-align: center;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
  }
  .formWhite {
    width: 100%;
    min-height: 44px;
    background-color: #fff;
    border-bottom: 1px solid #e4e4dc;
    display: flex;
    align-items: stretch;
  }
  .formGray {
    width: 100%;
    min-height: 44px;
    background-color: #eef0f2;
    border-bottom: 1px solid #e4e4dc;
    display: flex;
    align-items: stretch;
  }
}
.red {
  color: red;
  margin-right: 2px;
  vertical-align: top;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #e9e9ec;
}
.el-upload__tip {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
}
</style>
